<!-- 逃费记录列表 -->
<template>
	<view v-show="show">
		<view class="mask"></view>
		<view class="list-box">
			<div class="box-title">
				<div class="triangle"></div>
				<div>逃费记录</div>
				<div class="close-item hoverClass" @click.stop="hideFn">
					<img class="close" src="../static/icon-close.png" mode="">
				</div>
			</div>

			<view class="options-container">

				<view class="option-box" v-if="userType == 1">
					<view class="option-name">村委名称</view>
					<view class="select-box">
						<view class="selected-box" @click="showProjectList = !showProjectList"
							:style="{ color: selectProjectListName ? '#fff' : 'rgba(255, 255, 255, .3)' }">
							{{ selectProjectListName ? selectProjectListName : '请选择' }}
						</view>
						<scroll-view v-if="showProjectList" scroll-y class="select-options">
							<view v-for="(item, index) of projectListTemp" :class="{ 'selected': item.selected }"
								@click="selectedProjectFn(item, index)">{{ item.villageName }}</view>
						</scroll-view>
					</view>
				</view>

				<view class="option-box">
					<view class="option-name">车牌号码</view>
					<input text="text" v-model="carNum" placeholder="请输入车牌号码" placeholder-style="color: rgba(255, 255, 255, .3)" />
				</view>

				<view class="option-box">
					<view class="option-name">逃欠时间</view>
					<el-date-picker class="pick-time" v-model="submitDate" type="date" value-format="yyyy-MM-dd"
						popper-class="date-picker" placeholder="请选择日期" />
				</view>

				<view class="btn-list">
					<view class="btn" @click="reset">重置</view>
					<view class="btn" @click="searchList">搜索</view>
				</view>
			</view>

			<view class="list">
				<view class="liat-nav">
					<view>序号</view>
					<view>村委名称</view>
					<view>车牌号码</view>
					<view>逃欠金额(元)</view>
					<view>逃欠时间</view>
					<view>备注</view>
				</view>
				<view class="list-item" v-if="list.length" v-for="(item, index) of list" :key="index">
					<view>{{ item.serialNumber }}</view>
					<view>{{ item.villageName }}</view>
					<view>{{ item.carNumber }}</view>
					<view>{{ item.amount.toFixed(2) }}</view>
					<view>{{ item.evadeDebtTimeStr }}</view>
					<view>{{ item.remark ? item.remark : '-' }}</view>
				</view>
				<view class="no-list" v-if="list.length == 0">暂无数据</view>
			</view>

			<!-- 分页 -->
			<view class="pages-box">
				<view class="pages">
					<view class="pages-total">共{{ total }}个结果</view>
					<Pagination class=" hoverClass" :total="total" :pageSize="pageSize" :nowPage="nowPage"
						@change="change">
					</Pagination>
					<view class="pagesSize">
						<view class="">前往</view>
						<input type="number" v-model="nowPageNum" @confirm="changeSearch()">
						<view class="">页</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
import Pagination from "@/components/bwm-pagination/bwm-pagination.vue" // 分页组件


export default {
	name: "TFJLList",
	components: {
		Pagination,
	},
	props: {
		show: {
			type: Boolean,
			default: false
		},
		projectList: {
			type: Array,
			default: []
		},
		userType: {
			type: Number,
			default: 1
		},
		type: {
			type: Number,
			default: -1
		},
		villageId: {
			type: Number,
			default: 0
		}
	},
	watch: {
		projectList: {
			handler(newValue, oldValue) {
				const temp = newValue
				temp.forEach(item => {
					item.selected = false
				})
				this.projectListTemp = temp
			},
			deep: true
		},
		type: {
			handler(newValue, oldValue) {
				this.selectTypeListId = newValue
				this.selectTypeListName = this.typeList.find((item, index) => {
					if (item.key == newValue) {
						return item.value
					}
				}).value
			},
			deep: true
		},
		selectTypeListId: {
			handler(n, o) {
				this.getList()
			},
			deep: true
		},
		villageId: {
			handler(n, o) {
				this.selectProjectListId = n
			},
			deep: true
		},
	},
	data() {
		return {
			url: getApp().globalData.url,
			list: [],

			showProjectList: false,
			selectProjectListName: '',
			selectProjectListId: 0,
			projectListTemp: [],

			showTypeList: false,
			selectTypeListName: '全部',
			selectTypeListId: -1,
			typeList: [
				{
					key: -1,
					value: '全部',
				},
				{
					key: 0,
					value: '待指派',
				},
				{
					key: 1,
					value: '跟进中',
				},
				{
					key: 2,
					value: '已逾期',
				},
				{
					key: 3,
					value: '已完成',
				},
			],

			showInvestigatetreatList: false,
			selectInvestigatetreatListName: '全部',
			selectInvestigatetreatListId: -1,
			investigatetreatList: [],

			submitDate: '',

			total: 0,
			pageSize: 16,
			nowPage: 1,

			nowPageNum: '',

			showDetail: false,
			csId: 0,

			carNum: ''
		};
	},
	mounted() {
		this.getList()
	},
	methods: {
		// 获取村委列表
		getList(options) {
			uni.request({
				url: this.url + 'api/largescreen/getWhiteBlack',
				method: 'POST',
				data: {
					pageNum: this.nowPage,
					pageSize: this.pageSize,
					userType: this.userType, // 用户类型（1：运营，2：村委，99：村民）
					villageId: this.villageId ? this.villageId : this.selectProjectListId, // 村委
					type: 3, // 状态 1白名单2黑名单3逃费
					keyword: this.carNum, // 车牌号码
					FeedbackTime: this.submitDate ? this.submitDate : '',
				},
				success: e => {
					if (e.data.code == 200) {
						console.log(e.data.data)
						this.list = e.data.data.result
						// console.log(e.data)
						this.total = e.data.data.totalNum
					}
				},
				fail: e => {
					console.log(e)
				}
			})
		},
		showDetailFn(id) {
			this.csId = id,
				this.showDetail = true
		},
		change(nowPage) {
			this.nowPage = nowPage;
			this.getList()
		},
		changeSearch() { // 获取当前分页
			this.nowPage = parseInt(this.nowPageNum);
			this.getList()
		},
		selectedProjectFn(item, index) { // 选择村委
			this.projectListTemp.forEach(item => item.selected = false)
			this.projectListTemp[index].selected = !this.projectListTemp[index].selected
			this.selectProjectListId = this.projectListTemp[index].villageId
			this.selectProjectListName = this.projectListTemp[index].villageName
			this.showProjectList = false
		},
		selectTypeFn(index) { // 选择类型
			this.nowPage = 1
			this.selectTypeListId = this.typeList[index].key
			this.selectTypeListName = this.typeList[index].value
			this.showTypeList = false
		},
		selectInvestigatetreatFn(index) { // 选择分类名称
			this.selectInvestigatetreatListId = Number(this.investigatetreatList[index].dictValue)
			this.selectInvestigatetreatListName = this.investigatetreatList[index].dictLabel
			this.showInvestigatetreatList = false
		},
		searchList() {
			this.nowPage = 1
			this.getList()
		},
		reset() {
			this.nowPage = 1
			this.selectProjectListId = 0
			this.selectProjectListName = ''
			this.projectListTemp.forEach(item => item.selected = false)
			this.selectTypeListId = -1
			this.selectTypeListName = '全部'
			this.selectInvestigatetreatListId = -1
			this.selectInvestigatetreatListName = '全部'
			this.submitDate = ''
			this.nowPageNum = ''
			this.carNum = ''
			this.getList()
		},
		hideFn() {
			this.nowPage = 1
			this.selectProjectListId = 0
			this.selectProjectListName = ''
			this.projectListTemp.forEach(item => item.selected = false)
			this.selectTypeListId = -1
			this.selectTypeListName = '全部'
			this.selectInvestigatetreatListId = -1
			this.selectInvestigatetreatListName = '全部'
			this.submitDate = ''
			this.nowPageNum = ''
			this.carNum = ''
			this.$emit('hide')
		}
	}
}
</script>

<style lang="scss">
@import url(@/static/css/TSJYList.scss);

.btn-list {
	margin-left: 22.5vw !important;
}

.list-box {
	.list {

		.liat-nav,
		.list-item {
			view:nth-child(1) {
				width: 4.1667vw;
			}
			view:nth-child(2) {
				width: 25.4167vw;
			}
			view:nth-child(3),
			view:nth-child(4),
			view:nth-child(5) {
				width: 12.5vw;
				text-align: left;
                padding-left: 0.8333vw;

			}
			view:nth-child(6) {
				width: 14.5833vw;
			}
		}
		.list-item {
			view:nth-child(4) {
				color: #FDDB21;
			}
		}
	}

}
</style>
